<template>
  <div>
    <header class="header">
      <div class="title">
        <!-- <router-link to="/xqda"> -->
          <img @click="toback" src="../../assets/images/01_11.png" alt="" class="img_zuo" />
        <!-- </router-link> -->
        <!-- <img src="../../assets/images/01_11.png" alt="" class="img_zuo" /> -->
        <div>辖企档案查询</div>
      </div>
    </header>
    <div class="contant">
      <van-tabs @click="clickchange" v-model="active">
        <van-tab title="建筑物">
          <vJian v-if="jhfsjfh"></vJian>
        </van-tab>
        <van-tab title="九小门店">
          <vTable v-if="jxmdhft"></vTable>
        </van-tab>
        <van-tab title="住改非">
          <vzgf v-if="zgfdjhd"></vzgf>
        </van-tab>
        <van-tab title="企业">
          <vqy v-if="qiyehds"></vqy>
        </van-tab>
      </van-tabs>
    </div>

  </div>
</template>

<script>
  import vTable from './jiuxiaomen.vue'
  import vJian from './jianzhuwu.vue'
  import vzgf from './zgfff.vue'
  import vqy from './qiye.vue'
  export default {
    data() {
      return {
        active: 2, //头部导航
        jhfsjfh: true,
        jxmdhft: true,
        zgfdjhd: true,
        qiyehds:true
      }
    },
    components: {
      vTable,
      vJian,
      vzgf,
      vqy
    },
    methods: {
      toback(){
        sessionStorage.removeItem("session_zgf")
        sessionStorage.removeItem("session_jxmd")
        sessionStorage.removeItem("session_jzw")
        // this.$router.push("/xqda");
        this.$router.back()
      },
      clickchange() {
        console.log(this.active)
        let _this = this
        if (_this.active == 0) {
          _this.jhfsjfh = false;
          _this.$nextTick(() => {
            _this.jhfsjfh = true;
          });
        } else if (_this.active == 1) {
          _this.jxmdhft = false
          _this.$nextTick(() => {
            _this.jxmdhft = true;
          });
        } else if(_this.active == 2){
          console.log(_this.active)
          _this.zgfdjhd = false
          _this.$nextTick(() => {
            _this.zgfdjhd = true;
          });
        }else{
          console.log(_this.active)
          _this.qiyehds = false
          _this.$nextTick(() => {
            _this.qiyehds = true;
          });
        }
        sessionStorage.removeItem("session_zgf")
        sessionStorage.removeItem("session_jxmd")
        sessionStorage.removeItem("session_jzw")
        // this.$forceUpdate()
      },

    },
    created() {
      var _this = this;
      var tofile = localStorage.getItem("tofilequery")
      console.log(tofile)
      if (tofile == "jzw") {
        this.active = 0
      } else if (tofile == "jxmd") {
        this.active = 1
      } else if(tofile == "zgf"){
        this.active = 2
      }else{
        this.active = 3
      }

      //物理返回
      // window.addEventListener("popstate", function(){
      //   _this.toback();
      // }, false);
    },
    mounted() {
       document.body.style.background = "#FFFFFF";
    }
  }
</script>

<style scoped>
  .contant {
    margin-top: 1.8519rem;
  }
  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 20;
    font-size: 0.388888rem;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }

  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }
</style>
